<template>
  <div class="app-container">
      <el-tabs v-model="tabNum" @tab-click="handleClick" style="padding: 10px 0 10px 10px;background:#fff;">
          <el-tab-pane label="待审批" name="1">
            <div v-if="tabNum == '1'">
              <el-form :model="formInline" :inline="true"  label-width="auto" class="demo-form-inline">
                  <el-row :gutter="24">
                      <el-col :span="8">
                          <el-form-item label="申请人姓名" class="formItem">
                            <el-input v-model="formInline.sqrxm" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="工号" class="formItem">
                            <el-input v-model="formInline.gh" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="机构名称" class="formItem">
                            <el-input v-model="formInline.jgmc" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="申请时间" class="formItem">
                            <el-date-picker
                                v-model="formInline.sqsj"
                                class="w100"
                                type="daterange"
                                clearable
                                format='yyyy-MM-dd'
                                value-format='yyyy-MM-dd'
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                            <el-button @click="handleReset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
              </el-form>
              <el-table :data="tableData" v-loading="loading" border style="width: 100%;margin-top:20px;" :header-cell-style="{background:'#f5f9ff'}">
                <!-- <el-table-column prop="type" label="文件类型" align="center"></el-table-column>-->
                <el-table-column prop="reportName" label="文件名称" align="center" width="300px"></el-table-column> 
                <el-table-column prop="userName" label="申请人姓名" align="center"></el-table-column>
                <el-table-column prop="eid" label="工号" align="center"></el-table-column>
                <el-table-column prop="deptValue" label="机构名称" align="center"></el-table-column>
                <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button  type="text" size="small" @click="handelExamine(scope)" v-has="'authDownCheck'">审批</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                </el-pagination>
            </div>
           </div>
          </el-tab-pane>
          <el-tab-pane label="已审批" name="2">
            <div v-if="tabNum == '2'">
              <el-form :model="formInline1" :inline="true" class="demo-form-inline" label-width="auto">
                  <el-row :gutter="24">
                      <el-col :span="8">
                          <el-form-item label="申请人姓名" class="formItem">
                            <el-input v-model="formInline1.sqrxm" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                          <el-form-item label="工号" class="formItem">
                            <el-input v-model="formInline1.gh" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="8">
                          <el-form-item label="机构名称" class="formItem">
                            <el-input v-model="formInline1.jgmc" placeholder="" clearable></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="审批结果" class="formItem">
                            <el-select v-model="formInline1.spjg" placeholder="" class="w100" clearable>
                                <el-option label="通过" value="2"></el-option>
                                <el-option label="不通过" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch1">查询</el-button>
                            <el-button @click="handleReset1">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
              </el-form>
              <el-table :data="tableData1" v-loading="loading1" border style="width: 100%;margin-top:20px;" :header-cell-style="{background:'#f5f9ff'}">
                <!-- <el-table-column prop="type" label="文件类型" align="center"></el-table-column> -->
                <el-table-column prop="reportName" label="文件名称" align="center" width="300px"></el-table-column>
                <el-table-column prop="userName" label="申请人姓名" align="center"></el-table-column>
                <el-table-column prop="eid" label="工号" align="center"></el-table-column>
                <el-table-column prop="deptValue" label="机构名称" align="center"></el-table-column>
                <el-table-column prop="createTime" label="申请时间" align="center" width="200px"></el-table-column>
                <el-table-column prop="updateTime" label="审批时间" align="center" width="200px"></el-table-column>
                <el-table-column prop="approveStatus" label="审批结果" align="center">
                    <template slot-scope="scope">
                        {{scope.row.approveStatus == '2'?'通过':'不通过'}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button  type="text" size="small" @click="handelExamine1(scope)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange1"
                    @current-change="handleCurrentChange1"
                    :current-page="page1.pageNum"
                    :page-size="page1.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page1.total">
                </el-pagination>
            </div>
           </div>
          </el-tab-pane>
      </el-tabs>
      <el-dialog title="审批"   :visible.sync="openCel" width="40%" center>
        <div class="message">
            <div class="module">
                <el-tabs v-model="basicinfo">
                    <el-tab-pane label="申请信息" name="first">
                        <table class="detailtable">
                            <tr>
                                <td width="15%">申请人姓名:</td>
                                <td width="35%">{{shList.userName}}</td>
                                <td width="15%">工号:</td>
                                <td width="35%">{{shList.eid}}</td>
                            </tr>
                            <tr>
                                <td width="15%">机构名称:</td>
                                <td width="35%">{{shList.deptValue}}</td>
                                <td width="15%">申请文件:</td>
                                <td width="35%">{{shList.reportName}}</td>
                            </tr>
                            <tr>
                                <td width="15%">申请时间:</td>
                                <td colspan="3">{{shList.createTime}}</td>
                                <!--                                                <td>{{dataList.sshy}}</td>-->
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- <div class="module">
                <el-tabs  v-model="basicinfo">
                    <el-tab-pane label="企业授权信息" name="first">
                        
                    </el-tab-pane>
                </el-tabs>
            </div> -->
            <div class="module">
                <el-tabs  v-model="basicinfo">
                    <el-tab-pane label="审批信息" name="first">
                        <el-form ref="sh" :model="shList" inline :rules="rules">
                            <el-row>
                                <el-form-item label="审批结果">
                                    <el-radio v-model="shList.status" label="0">通过</el-radio>
                                    <el-radio v-model="shList.status" label="1">不通过</el-radio>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="备注" v-if="shList.status == '1'" prop="comment">
                                    <el-input v-model="shList.comment" :cols="50" :rows="4" type="textarea" placeholder="请输入备注"></el-input>
                                </el-form-item>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="dialog-footer">
                <el-button @click="openCel = false" type="primary" plain round>取消</el-button>
                <el-button type="primary" @click="handelSave" round>保存</el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog title="查看"   :visible.sync="openCel1" width="40%" center>
        <div class="message">
            <div class="module">
                <el-tabs v-model="basicinfo">
                    <el-tab-pane label="申请信息" name="first">
                        <table class="detailtable">
                            <tr>
                                <td width="15%">申请人姓名:</td>
                                <td width="35%">{{shList1.userName}}</td>
                                <td width="15%">工号:</td>
                                <td width="35%">{{shList1.eid}}</td>
                            </tr>
                            <tr>
                                <td width="15%">机构名称:</td>
                                <td width="35%">{{shList1.deptValue}}</td>
                                <td width="15%">申请文件:</td>
                                <td width="35%">{{shList1.reportName}}</td>
                            </tr>
                            <tr>
                                <td width="15%">申请时间:</td>
                                <td colspan="3">{{shList1.createTime}}</td>
                                <!--                                                <td>{{dataList.sshy}}</td>-->
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- <div class="module">
                <el-tabs  v-model="basicinfo">
                    <el-tab-pane label="企业授权信息" name="first">
                        
                    </el-tab-pane>
                </el-tabs>
            </div> -->
            <div class="module">
                <el-tabs  v-model="basicinfo">
                    <el-tab-pane label="审批信息" name="first">
                        <p class="result">
                            <span>审批结果：{{shList1.approveStatus == '2'?'通过':'不通过'}}</span>
                            <span>审批时间：{{shList1.updateTime}}</span>
                            <span v-if="shList1.approveStatus != '2'">备注：{{shList1.comment}}</span>
                        </p>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="dialog-footer">
                <el-button @click="openCel1 = false" type="primary" plain round>确定</el-button>
            </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {getApproveList,updateApprove} from '@/api/manager.js'

export default {
    name:'Auth_down',
    data(){
        return{
            tabNum:'1',
            formInline:{
                sqsj:[]
            },
            formInline1:{},
            loading:false,
            tableData:[],
            page:{
                pageNum:1,
                pageSize:10,
                total:0
            },
            openCel:false,
            shList:{},
            rules:{
                    comment: [
                        { required: true, message: '请填写备注', trigger: 'blur' }
                    ]
                },
            basicinfo:'first',
            loading1:false,
            tableData1:[],
            page1:{
                pageNum:1,
                pageSize:10,
                total:0
            },
            openCel1:false,
            shList1:{},
        }
    },
    created(){
        this.onLoad();
        this.onLoad1();
    },
    methods:{
        onLoad(){
            let params = {...this.formInline,pageNum:this.page.pageNum,pageSize:this.page.pageSize,spzt:'0'}
            if(this.formInline.sqsj.length == 2){
                params.sqsjStart = this.formInline.sqsj[0]
                params.sqsjEnd = this.formInline.sqsj[1]
            }
            delete params.sqsj;
            this.loading = true;
            getApproveList(params).then(res=>{
                this.loading = false;
                this.tableData = res.data.records;
                this.page.total = Number(res.data.total);
            })
        },
        onLoad1(){
            let params = {...this.formInline1,pageNum:this.page1.pageNum,pageSize:this.page1.pageSize,spzt:'1'}
            this.loading1 = true;
            getApproveList(params).then(res=>{
                this.loading1 = false;
                this.tableData1 = res.data.records;
                this.page1.total = Number(res.data.total);
            })
        },
        handleSearch(){
            this.page = {
                pageNum:1,
                pageSize:10,
                total:0
            }
            this.onLoad();
        },
        handleSearch1(){
            this.page1 = {
                pageNum:1,
                pageSize:10,
                total:0
            }
            this.onLoad1();
        },
        handleReset(){
            this.formInline = {
                sqsj:[]
            }
            this.page = {
                pageNum:1,
                pageSize:10,
                total:0
            }
            this.onLoad();
        },
        handleReset1(){
            this.formInline1 = {}
            this.page1 = {
                pageNum:1,
                pageSize:10,
                total:0
            }
            this.onLoad1();
        },
        handelExamine(scope){
            this.openCel = true;
            this.shList = scope.row;
        },
        handelExamine1(scope){
            this.openCel1 = true;
            this.shList1 = scope.row;
        },
        handelSave(){
            let params = {
                id:this.shList.id,
                status:this.shList.status,
                comment:this.shList.comment
            }
            updateApprove(params).then(res=>{
                if(res.status){
                    this.openCel = false;
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                    this.onLoad();
                }else{
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            })
        },
        handleClick(e) {
                // debugger
        },
        handleSizeChange(val){
            this.page.pageSize = val;
            this.onLoad();
        },
        handleCurrentChange(val){
            this.page.pageNum = val;
            this.onLoad();
        },
        handleSizeChange1(val){
            this.page1.pageSize = val;
            this.onLoad1();
        },
        handleCurrentChange1(val){
            this.page1.pageNum = val;
            this.onLoad1();
        }
    },
    filters:{
        
    },
    computed:{

    },

}
</script>

<style scoped lang="scss">
.formItem {
  width: 100%;
  /deep/.el-form-item__content {
    width: calc(100% - 115px);
    /deep/.el-select,
    /deep/.el-cascader {
      width: 100%;
    }
    .w100 {
      width: 100% !important;
    }
  }
}
.dialog-footer {
    text-align: center;margin: 20px auto;
}
.detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
.detailtable tr{width: 100%;}
.detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
.detailtable td{font-weight: normal; background-color:#fff}
.detailtable td{word-break:break-all;}
.result{
    span{
        display: inline-block;
        margin-right: 30px;
    }
}
</style>
<style>
.pagination{
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>